<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 900px),only screen and (min-device-width： 900px)" href="css/next_one.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 900px),only screen and （max-device-width： 900px）" href="css/one_change.css"/>
</head>

<body>
    <div class="left">
        <h2>
            <img src="img/logo.jpg" alt="">
            <span>Rukada Admin</span>
        </h2>
        <ul>
            <li class="li_one">MAIN NAVIGATION</li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-1.jpg" alt="">
                    <span>Dashboard</span>
                </div>
                <img src="img/xiaojiantu.jpg" alt="">
            </li>
            <li class="li_one">LABELS</li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
            <li>
                <div class="left_he">
                    <img src="img/img-2.jpg" alt="">
                    <span>Important</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="right">
        <header>
            <div class="right_left">
                <img src="img/sangang.jpg" alt="">
                <input type="text" placeholder="Enter keywords">
            </div>
            <div class="right_right">
                <img src="img/header-1.jpg" alt="">
                <img src="img/header-2.jpg" alt="">
                <img src="img/header-3.jpg" alt="">
                <img src="img/header-4.jpg" alt="">
            </div>
        </header>
        <section>
            <div class="section_left">
                <span>Radios & Checkboxes</span>
                <p><a href="">Rukada</a> / <a href=""> UI Elements</a> / <span>Radios & Checkboxes</span></p>
            </div>
            <img src="img/annnnn.jpg" alt="">
        </section>
        <div class="input">
            <p><span>CHECKBOXES</span></p>
            <ul>
                <li>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                </li>
                <li style="align-items: flex-start;margin-top:5px; border-bottom:1px solid #dee2e6;">
                    <div style="display:flex;"><input type="checkbox"><span>WARNING</span> </div>
                    <div style="display:flex;"><input type="checkbox"><span>WARNING</span> </div>
                    <div style="display:flex;"><input type="checkbox"><span>WARNING</span> </div>
                    <div style="display:flex;"></div>
                </li>
            </ul>
            <p style="border:0;padding-top: 10px;"><span>INLINE CHECKBOX</span></p>
            <ul>
                <li style="align-items: center;">
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                    <div style="display:flex;"><input type="checkbox"><span>PRIMARY</span></div>
                </li>
            </ul>
        </div>
        <div class="radio">
            <p><span>RADIOS</span></p>
            <ul>
                <li>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                </li>
                <li style="align-items: flex-start;margin-top:5px; border-bottom:1px solid #dee2e6;">
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div></div>
                </li>
            </ul>
            <p style="border:0; padding:40px 0"><span>INLINE RADIO</span></nav>
            <ul style="height:80px;display: block;">
                <li style=" display: flex; align-items: center;height: 50px;">
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                    <div><nav><input type="radio" name="one"><span>PRIMARY 1</span></input> </nav><br><br><nav><input type="radio" name="one"><span>PRIMARY1</span></input></nav></div>
                </li>
            </ul>
        </div>
        <div class="foot">
            <p> Copyright © 2018 Rukada Admin</p>
        </div>
    </div>
</body>

</html>
<script src="js/publick.js"></script>
<script type="text/javascript">
fn();
</script>